import React, { Component } from 'react';
import MHeader from "../../components/MHeader/index";
import profile from '../../common/images/profile.png';
import './index.less'
import {Link} from 'react-router-dom';
import user from '../../redux/actions/user';
import Alert from "../../components/Alert/index";
import {connect} from 'react-redux';
import * as action from '../../redux/actions/user'

class Login extends Component {
    constructor(){
        super();
        this.state = {username:'',password:''}
    }
    login = (event) => {
        event.preventDefault();
        this.props.login(this.state);
    }
    componentDidUpdate() {
       this.props.validate()
    }
    render() {
        return (
            <div className="login">
                <MHeader title="登录" />
                <div className="login-image">
                    <img src={profile} />
                </div>
                <form onSubmit={this.handleSubmit}>
                    <input type="text" placeholder="请输入用户名" value={this.state.username} onChange={(e)=>{
                        this.setState({username:e.target.value})
                    }} />
                    <input type="text" placeholder="密码" value={this.state.password} onChange={(e)=>{
                        this.setState({password:e.target.value})
                    }} />
                    <p><Link to="/reg">前往注册</Link></p>
                    <button onChange={this.login}>登&nbsp;录</button>
                    <p>忘记密码?</p>
                </form>
                <Alert error={this.props.user.err} />
            </div>
        );
    }
}

export default connect(state=>({...state}),action)(Login);